<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="70px">
      <el-row :gutter="24">
        <el-col :span="4">
          <el-form-item label="会员昵称" prop="nickName">
            <el-input v-model="form.name" placeholder="请输入会员昵称" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号码" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="loadData">搜索</el-button>
          <el-button @click="searchResetForm('form')">重 置</el-button>

        </el-col>
      </el-row>
    </el-form>

    <div style="margin-bottom: 20px;" />
    <el-table
      :loading="loading"
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="50"
      />
      <el-table-column v-for="(item,index) in columnLists" :key="index" :prop="item.prop" :label="item.label" align="center" />
      <el-table-column prop="privilegeName" align="center" label="物流信息">
        <template slot-scope="scope">
          <span v-if="scope.row.logNum===1" style="color: #409EFF" @click="showLogistics(scope.row.id)">已发送</span>
          <span v-else style="color: #E6A23C">未发送</span>
        </template>
      </el-table-column>
      <el-table-column prop="privilegeName" align="center" label="特权开关">
        <template slot-scope="scope">
          <el-switch :value="scope.row.isPrivilege" @change="handleOpen2(scope.$index)" />
        </template>
      </el-table-column>
      <el-table-column prop="image" label="显示头像" align="center">
        <template slot-scope="scope">
          <el-image
            :src="scope.row.image"
            alt="图片"
            style="width: 50px; height: 50px;"
            :preview-src-list="imageData"
            :initial-index="scope.row.$index"
            fit="cover"
            :min-scale="1"
            :max-scale="1"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="注册时间"
        align="center"
        prop="createTime"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="text"

            @click="edit(scope.$index)"
          >
            抢单时间
          </el-button>
          <el-button
            type="text"

            @click="logisticsFunc(scope.$index)"
          >
            快递信息
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <Pagination :total="total" :current-page="pageNum" :page-size="pageSize" @handleChange="handleChange" />

    <el-dialog title="抢单时间" :close-on-click-modal="false" :visible.sync="dialogVisible" width="30%" @close="cancel('formLabelAlign')">
      <el-form ref="formLabelAlign" :model="formLabelAlign" :rules="rules" label-width="140px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="抢单开始时间" prop="startTime">
              <el-time-picker
                v-model="formLabelAlign.startTime"
                value-format="hh:mm:ss"
                format="hh:mm:ss"
                placeholder="请选择抢单开始时间"
              />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="抢单结束时间" prop="endTime">
              <el-time-picker
                v-model="formLabelAlign.endTime"
                value-format="hh:mm:ss"
                format="hh:mm:ss"
                placeholder="请选择抢单开始时间"
              />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="save('formLabelAlign')">确 定</el-button>
        <el-button size="mini" @click="resetForm('formLabelAlign')">重 置</el-button>
        <el-button size="mini" type="danger" @click="cancel('formLabelAlign')">关 闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="物流信息" :close-on-click-modal="false" :visible.sync="logistics" width="45%" @close="cancelLogistics('formLogistics')">
      <el-form ref="formLogistics" :model="formLogistics" :rules="rulesLogistics" label-width="140px">

        <el-row>
          <el-col :span="10">
            <el-form-item label="快递名称" prop="expressName">
              <el-input v-model="formLogistics.expressName" placeholder="请输入快递名称" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="快递单号" prop="expressNo">
              <el-input v-model="formLogistics.expressNo" placeholder="请输入快递单号" />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="收货姓名" prop="name">
              <el-input v-model="formLogistics.name" placeholder="请输入收货姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="收货电话" prop="phone">
              <el-input v-model="formLogistics.phone" placeholder="请输入收货电话" />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="收货地址" prop="address">
              <el-input v-model="formLogistics.address" placeholder="请输入收货地址" />
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="saveLogistics('formLogistics')">确 定</el-button>
        <el-button size="mini" @click="resetForm('formLogistics')">重 置</el-button>
        <el-button size="mini" type="danger" @click="cancelLogistics('formLogistics')">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import { showData, resetForm, validate, success, fail } from '@/api/common'
import Pagination from '@/components/Pagination'
import { get, lists, post } from '@/api/requestCommon'
export default {
  name: 'PagePermission',
  components: {
    Pagination
  },
  data() {
    return {
      formLogistics: {
        name: '',
        phone: '',
        expressName: '',
        expressNo: '',
        memberId: ''
      },
      rulesLogistics: {
        expressName: [
          { required: true, message: '请输入快递名称', trigger: 'change' }
        ],
        expressNo: [
          { required: true, message: '请输入快递单号', trigger: 'change' }
        ]
      },
      rules: {
        startTime: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择结束时间', trigger: 'change' }
        ]
      },
      imageData: [],
      pageNum: 1, pageSize: 10, total: 0,
      form: { nickName: '', phone: '' },
      tableData: [],
      selectRows: [],
      dialogVisible: false,
      title: '添加轮播图',
      editId: '',
      logistics: false,
      columnLists: [
        { prop: 'nickName', label: '会员昵称' },
        { prop: 'phone', label: '手机号码' },
        { prop: 'inviterCode', label: '邀请码' },
        { prop: 'inviterNum', label: '邀请人数' },
        { prop: 'coupons', label: '优惠券金额' },
        { prop: 'bonus', label: '我的奖金' },
        { prop: 'extension', label: '推广金额' },
        { prop: 'balance', label: '我的余额' }
      ],
      type: 'shop',
      formLabelAlign: {
        memberId: '',
        startTime: '',
        endTime: ''
      },
      loading: true,
      activeIndex: ''
    }
  },
  created() {

  },
  mounted() {
    this.loadData()
  },
  methods: {
    showLogistics(memberId) {},
    handleOpen2(index) {
      this.activeIndex = index
      let title = ''
      const row = this.tableData[index]
      if (row.isPrivilege) {
        title = '是否关闭特权'
      } else {
        title = '是否打开特权'
      }
      this.$confirm(`${title}`, '操作确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        confirmButtonClass: 'confirm-button-sure',
        cancelButtonClass: 'confirm-button-cancel'
      }).then(() => {
        if (!row.isPrivilege) {
          if (row.startTime === null && row.endTime === null) {
            fail('请添加抢单时间')
            return false
          }
        }
        post('member/savePrivilege', { id: row.id, isPrivilege: !row.isPrivilege }).then(response => {
          if (response.code === 200) {
            success(response.msg)
            row.isPrivilege = !row.isPrivilege
          } else {
            fail(response.msg)
          }
        })
      }).catch(() => {

      })
    },
    saveLogistics(formName) {
      if (validate(this, formName)) {

      }
    },
    save(formName) {
      if (validate(this, formName)) {
        post('member/saveMemberOrderTime', this.formLabelAlign).then(response => {
          if (response.code === 200) {
            success(response.msg)
            this.dialogVisible = false
            this.loadData()
          } else {
            fail(response.msg)
          }
        })
      }
    },

    cancelLogistics(formName) {
      resetForm(this, formName)
      this.logistics = false
    },
    grabbingTime() {
      get('orderTime/findOne').then(res => {
        if (res.code === 200) {
          Object.assign(this.formLabelAlign, res.data)
        } else {
          fail(res.msg)
        }
      })
    },
    edit(index) {
      this.dialogVisible = true
      const row = this.tableData[index]
      console.log('rrrr', row)
      if (row.startTime !== null && row.endTime !== null) {
        Object.assign(this.formLabelAlign, row)
      } else {
        this.grabbingTime()
      }
      this.formLabelAlign.memberId = row.id
    },
    cancel(formName) {
      resetForm(this, formName)
      this.dialogVisible = false
    },

    resetForm(formName) {
      resetForm(this, formName)
    },
    searchResetForm(formName) {
      resetForm(this, formName)
      this.loadData()
    },

    logisticsFunc(index) {
      const memberId = this.tableData[index].id
      this.logistics = true
      get('member/memberAddress/' + memberId).then(response => {
        if (response.code === 200) {
          this.formLogistics.phone = response.data.tel
          this.formLogistics.name = response.data.name
          this.formLogistics.address = response.data.newAddress
          this.formLogistics.memberId = memberId
        } else {
          fail(response.msg)
        }
      })
    },

    selectionChange(rows) {
      this.selectRows = rows
    },

    handleChange(pageNum, pageSize) {
      this.pageNum = pageNum
      this.pageSize = pageSize
      this.loadData()
    },

    loadData() {
      this.form.pageNum = this.pageNum
      this.form.pageSize = this.pageSize
      lists('member', this.form).then(response => {
        if (response.code === 200) {
          response.data.records.forEach(item => {
            this.imageData.push(item.image)
          })
          showData(response, this)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
